﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" href="../../js/jqx/styles/jqx.base.css" type="text/css" />
   <script type="text/javascript" src="../../js/jqx/jqxcore.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxchart.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxdata.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxmenu.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxtreegrid.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxgrid.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxpanel.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxdata.export.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxgrid.export.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxwindow.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxprogressbar.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxnumberinput.js"></script>

    <script type="text/javascript" src="../../js/jqx/jqxcore.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxdata.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../js/jqx/jqxtreegrid.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script>
<script type="text/javascript">
       $(document).ready(function () {
           // prepare the data
           var source =
           {
               dataType: "csv",
               dataFields: [
                   { name: 'EmployeeKey', type: 'number' },
                   { name: 'ParentEmployeeKey', type: 'number' },
                   { name: 'FirstName', type: 'string' },
                   { name: 'LastName', type: 'string' },
                   { name: 'Title', type: 'string' },
                   { name: 'HireDate', type: 'date' },
                   { name: 'BirthDate', type: 'date' },
                   { name: 'Phone', type: 'string' },
                   { name: 'Gender', type: 'string' },
                   { name: 'DepartmentName', type: 'string' }
               ],
               hierarchy:
               {
                   keyDataField: { name: 'EmployeeKey' },
                   parentDataField: { name: 'ParentEmployeeKey' }
               },
               id: 'EmployeeKey',
               url: '../../js/jqx/employeesadv.csv'
           };
           var dataAdapter = new $.jqx.dataAdapter(source);
           // create Tree Grid
           $("#treeGrid").jqxTreeGrid(
           {
               width: 850,
               source: dataAdapter,
               pageable: true,
               columnsResize: true,
               ready: function () {
                   // expand row with 'EmployeeKey = 32'
                   $("#treeGrid").jqxTreeGrid('expandRow', 32);
               },
               columns: [
                 { text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 200 },
                 { text: 'LastName', dataField: 'LastName', width: 200 },
                 { text: 'Department Name', dataField: 'DepartmentName', width: 150 },
                 { text: 'Title', dataField: 'Title', width: 300 },
                 { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
                 { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
                 { text: 'Phone', dataField: 'Phone', cellsFormat: 'd', width: 120 }
               ]
           });
       });
    </script>
</head>
<body class=''>
    <div id="treeGrid">
    </div>
   
</body>
</html>
